<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9-d3-geo</title>
    <script src="./js/d3.min.js"></script>
    <script src="http://d3js.org/topojson.v0.min.js"></script>
    <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
</head>
<style>
    path {
        stroke: white;
        stroke-width: 0.5px;
        fill: grey;
    }

    .stateTN {
        fill: red;
    }

    .stateAP {
        fill: blue;
    }

    .stateMP {
        fill: green;
    }
</style>

<body>

</body>
<script>
    var width = 600;
    var height = 400;
    var projection = d3.geo.mercator()
        .center([78, 22])
        .scale(680)
        .translate([width / 2, height / 2]);

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

    var path = d3.geo.path()
        .projection(projection);

    d3.json("india.json", function (error, topology) {
        g.selectAll("path")
            .data(topojson.object(topology, topology.objects.states)
                .geometries)
            .enter()
            .append("path")
            .attr("class", function (d) { return "state" + d.id; })
            .attr("d", path)
    });
</script>

</html>